import React, {useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Input, Card, Row, Col,  Image, Modal, Form, message} from 'antd';
import {AudioOutlined, PlusOutlined} from '@ant-design/icons';
import { ToolFilled,FileExcelOutlined } from '@ant-design/icons';
import ProForm, {
  ProFormText,
  ProFormSelect,
  ProFormDependency,
  ProFormTextArea,
  ProFormUploadButton
} from '@ant-design/pro-form';
import UpdateImg from '@/components/ImageText/UpdateImg'
import RichText from '@/components/RichText/index'

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const { Search } = Input;
const { Meta } = Card;

const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);

const onSearch = value => console.log(value);

// 定义Form实例，用来操作表单
// const [formObj] = ProForm.useForm()

const ImageText = () => {

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  /**
   * 编辑器输入内容后，设置derails字段的value
   * @param content
   */
  const setDetails = content => formObj.setFieldsValue({'details':content})




  return (
    <PageContainer
      header={{
        title: '图文管理',
        breadcrumb: {},
      }}
    >
      <div style={{lineHeight:2.3,background:"white",padding:20}}>
        图文搜索：
        <Search placeholder="请输入要搜索的玩意" style={{width:300}} onSearch={onSearch} enterButton />
        <Button style={{marginLeft:20}} key="button" onClick={showModal} icon={<PlusOutlined/>} type="primary">
          添加图文信息
        </Button>
        <Modal title="图文添加" visible={isModalVisible} footer={null} destroyOnClose={true} onOk={handleOk} onCancel={handleCancel}>
          <ProForm
            onFinish={async (values) => {
              await waitTime(2000);
              console.log(values);
              message.success('提交成功');
              handleOk();
            }}
            // initialValues={{
            //   name: '蚂蚁设计有限公司',
            //   name2: '蚂蚁设计集团',
            //   useMode: 'chapter',
            // }}
          >
            <ProFormText
              width="md"
              name="name"
              label="标题"
              tooltip="最长为 24 位"
              placeholder="请输入标题"
              rules={[
                {required:true,message:'请输入标题'}
              ]}
            />
            <ProFormText
              width="md"
              name={['name2', 'text']}
              label="作者"
              tooltip="最长为 24 位"
              placeholder="请输入昵称"
              rules={[
                {required:true,message:'请输入昵称'}
              ]}
            />
            <
              ProFormTextArea
              width="xl"
              label="摘要"
              placeholder="请输入摘要"
              name="remark"
              rules={[
                {required:true,message:'请输入摘要'}
              ]}
            />


            <ProFormUploadButton
              name="upload"
              label="图文封面"
              max={1}
              fieldProps={{
                name: 'file',
                listType: 'picture-card',
              }}
              rules={[
                {required:true,message:'请放入图片'}
              ]}
            >
              <UpdateImg/>
            </ProFormUploadButton>

            <ProFormText
              width="md"
              name="keyword"
              label="正文"
              placeholder="请输入内容"
              rules={[
                {required:true,message:'请输入内容'}
              ]}
            >
              <RichText
                setDetails={setDetails}
              />
            </ProFormText>


          </ProForm>
        </Modal>
      </div>
      <Row wrap={true}>
        <Col span={6}>
          <Card
            hoverable
            style={{ width: '85%',margin:20 }}
            cover={<Image style={{height:100}} alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
          >
            <Meta title="Europe Street beat" description="" />
            <div style={{marginTop:10}}>
              <Button type="primary" shape="circle" icon={<FileExcelOutlined />} />
              <Button style={{marginLeft:10}} type="primary" shape="circle" icon={<ToolFilled />} />

            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card
            hoverable
            style={{ width: '85%',margin:20 }}
            cover={<Image style={{height:100}} alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
            <div style={{marginTop:10}}>
              <Button type="primary" shape="circle" icon={<FileExcelOutlined />} />
              <Button style={{marginLeft:10}} type="primary" shape="circle" icon={<ToolFilled />} />

            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card
            hoverable
            style={{ width: '85%',margin:20 }}
            cover={<Image style={{height:100}} alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
            <div style={{marginTop:10}}>
              <Button type="primary" shape="circle" icon={<FileExcelOutlined />} />
              <Button style={{marginLeft:10}} type="primary" shape="circle" icon={<ToolFilled />} />

            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card
            hoverable
            style={{ width: '85%',margin:20 }}
            cover={<Image style={{height:100}} alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
            <div style={{marginTop:10}}>
              <Button type="primary" shape="circle" icon={<FileExcelOutlined />} />
              <Button style={{marginLeft:10}} type="primary" shape="circle" icon={<ToolFilled />} />

            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card
            hoverable
            style={{ width: '85%',margin:20 }}
            cover={<Image style={{height:100}} alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
            <div style={{marginTop:10}}>
              <Button type="primary" shape="circle" icon={<FileExcelOutlined />} />
              <Button style={{marginLeft:10}} type="primary" shape="circle" icon={<ToolFilled />} />

            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card
            hoverable
            style={{ width: '85%',margin:20 }}
            cover={<Image style={{height:100}} alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
            <div style={{marginTop:10}}>
              <Button type="primary" shape="circle" icon={<FileExcelOutlined />} />
              <Button style={{marginLeft:10}} type="primary" shape="circle" icon={<ToolFilled />} />

            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card
            hoverable
            style={{ width: '85%',margin:20 }}
            cover={<Image style={{height:100}} alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
            <div style={{marginTop:10}}>
              <Button type="primary" shape="circle" icon={<FileExcelOutlined />} />
              <Button style={{marginLeft:10}} type="primary" shape="circle" icon={<ToolFilled />} />

            </div>
          </Card>
        </Col>
      </Row>


    </PageContainer>
  );
}


export default ImageText;
